<template>
	<view class="content-box">
		<view v-for="(item,index) in bookLists" :key="index" class="everyClass" @click.stop="clickBookListFn(item)">
			<image :src="item.cover" style="height: 300rpx;width: 200rpx" mode="contain"></image>
			<text class="textDesc">{{item.title}}</text>
		</view>
	</view>
	<view class="tabBar">
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import getApiData from '../getAPIData';

	let bookLists = ref([])

	onMounted(() => {
		getApiData.getBookList().then(res => {
			if (res.ok) {
				res.bookLists.forEach(item => {
					item.cover = item.cover.split("/")[item.cover.split("/").length - 1].split(
						"%3A").join(":").split("%2F").join("/")
				})
				bookLists.value = res.bookLists
			}
		})
	})

	const clickBookListFn = (item) => {
		uni.setStorageSync("bookListId",item._id)
		uni.navigateTo({
			url: '/pages/businessModel/books/bookListDetail',
		})
	}
</script>

<style scoped>
	.content-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		height: auto;
	}

	.textDesc {
		width: 90%;
		font-size: 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 5rpx;
		text-align: center;
	}

	.tabBar {
		height: 100rpx;
	}

	.everyClass {
		width: 33%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		margin: 20rpx 0;
	}
</style>